<!--1)	刮奖卡领取日、月报表-->1
<template>
  <div class="app-container">
    <!--    {{ searchObj }}-->
    <!-- banner列表 -->
    <div>
      <el-form :inline="true" :model="page" class="demo-form-inline">
        <el-form-item label="营业厅">
<!--          <el-input v-model.trim="page.acptsiteid" placeholder="岳阳"></el-input>-->
          <el-select v-model="page.acptsiteid" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model.trim="page.obtainstate" placeholder="0"></el-input>
        </el-form-item>
        <el-form-item label="业务类型">
          <el-input v-model.trim="page.svcid" placeholder="1"></el-input>
        </el-form-item>
        <el-form-item label="年">
          <el-input v-model.trim="page.y" placeholder="2020"></el-input>
        </el-form-item>
        <el-form-item label="月">
          <el-input v-model.trim="page.m" placeholder="01"></el-input>
        </el-form-item>
        <el-form-item label="日">
          <el-input v-model.trim="page.d" placeholder="01"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="ReportOfExcelDownloads()" type="primary">导出当页数据</el-button>
        </el-form-item>
      </el-form>
    </div>
    <template>
      <el-table :data="searchObj" style="width: 100%"><!--v-loading="loading"-->
        <el-table-column prop="tabGgcardEncash.cardno" label="刮奖卡序号" width="180"></el-table-column>
        <el-table-column prop="tabCode.codeName" label="营业厅" width="180"></el-table-column>
        <el-table-column prop="obtainstate" label="状态" width="180"></el-table-column>
        <el-table-column prop="svcid" label="业务类型" width="180"></el-table-column>
        <el-table-column prop="optrdate" label="领取日期"></el-table-column>
        <el-table-column prop="tabHallUsermessage.pnumber" label="用户手机号"></el-table-column>
<!--        <el-table-column fixed="right" label="操作" width="200">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button @click="ReportOfExcelDownloads()" type="primary" icon="el-icon-edit" size="small">导出当页数据</el-button>-->
<!--            &lt;!&ndash;            <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" size="small">编辑</el-button>&ndash;&gt;-->
<!--            &lt;!&ndash;            <el-button type="danger" icon="el-icon-delete" size="small">删除</el-button>&ndash;&gt;-->
<!--          </template>-->
<!--        </el-table-column>-->
        <!-- 分页 -->
      </el-table>
    </template>
    <el-pagination
        :current-page="pageNo"
        :page-size="pageSize"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
    />
  </div>
</template>
<script>
//引入api接口
import scraping from "../../api/scraping";

export default {
  // 定义数据模型
  data() {
    return {
      pageNo: 1,
      pageSize: 2,
      searchObj: [{
        tabGgcardEncash: [{
          cardno: null
        }],
        tabHallUsermessage: [{
          pnumber: null
        }],
        tabcode: [{
          codeName: null
        }],
        obtainstate: null,
        svcid: null,
        optrdate: null
      }],
      options:  [{
        value: null,
        label: '----请选择----'
      },{
        value: '43',
        label: '飞黄腾达营业厅'
      }, {
        value: '44',
        label: '望子成龙营业厅'
      }, {
        value: '45',
        label: '春天来了营业厅'
      }, {
        value: '46',
        label: '深留爱心营业厅'
      }],
      value: null,
      //方法传的参数对象
      page: {
        pageNo: 1,
        pageSize: 2,
        acptsiteid: null,
        obtainstate: null,
        svcid: null,
        y: null,
        m: null,
        d: null
      },
      total: 0
    }
  },
  // 页面渲染成功后获取数据
  created() {
    this.getList();
  },
  methods: {//定义方法对api接口的方法调用
    getList(page = 1) {
      this.page.pageNo = page
      scraping.getSelectList(this.page)
          .then(res => {
            this.total = res.data.total
            this.searchObj = res.data.list
            console.log(res)
          })//请求成功
          .catch(error => {
            console.log(error)
          })//请求失败
    },
    onSubmit() {
      this.getList();
    },
    ReportOfExcelDownloads() {
      // alert(this.page.pageNo)
      // alert("页码" + this.page.pageNo + "/n地址" + this.page.acptsiteid + "/n状态" + this.page.obtainstate+ "/n业务类型" + this.page.svcid)
      var msg = "确定要导出数据吗？";
      if (confirm(msg) == true) {
        window.location.href = "http://localhost:9527/userTest/tab-ggcard-obtain/scratch/GetTheScratchExcelDownloads?" +
            "pageNo=" + this.page.pageNo +
            "&acptsiteid=" + this.page.acptsiteid +
            "&obtainstate=" + this.page.obtainstate+
            "&svcid=" + this.page.svcid+
            "&y="+this.page.y+
            "&m="+this.page.m+
            "&d="+this.page.d;
      }
    }
  }
};
</script>
